<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head th:fragment="commonheader">

    <meta charset="UTF-8">

    <!--ios7-->
    <link rel="stylesheet" type="text/css" href="js/ios-switch/switchery.css"/>

    <!--icheck-->
    <link href="js/iCheck/skins/minimal/minimal.css" rel="stylesheet">
    <link href="js/iCheck/skins/minimal/red.css" rel="stylesheet">
    <link href="js/iCheck/skins/minimal/green.css" rel="stylesheet">
    <link href="js/iCheck/skins/minimal/blue.css" rel="stylesheet">
    <link href="js/iCheck/skins/minimal/yellow.css" rel="stylesheet">
    <link href="js/iCheck/skins/minimal/purple.css" rel="stylesheet">

    <link href="js/iCheck/skins/square/square.css" rel="stylesheet">
    <link href="js/iCheck/skins/square/red.css" rel="stylesheet">
    <link href="js/iCheck/skins/square/green.css" rel="stylesheet">
    <link href="js/iCheck/skins/square/blue.css" rel="stylesheet">
    <link href="js/iCheck/skins/square/yellow.css" rel="stylesheet">
    <link href="js/iCheck/skins/square/purple.css" rel="stylesheet">

    <link href="js/iCheck/skins/flat/grey.css" rel="stylesheet">
    <link href="js/iCheck/skins/flat/red.css" rel="stylesheet">
    <link href="js/iCheck/skins/flat/green.css" rel="stylesheet">
    <link href="js/iCheck/skins/flat/blue.css" rel="stylesheet">
    <link href="js/iCheck/skins/flat/yellow.css" rel="stylesheet">
    <link href="js/iCheck/skins/flat/purple.css" rel="stylesheet">

    <!--pickers css-->
    <link rel="stylesheet" type="text/css" href="js/bootstrap-datepicker/css/datepicker-custom.css"/>
    <link rel="stylesheet" type="text/css" href="js/bootstrap-timepicker/css/timepicker.css"/>
    <link rel="stylesheet" type="text/css" href="js/bootstrap-colorpicker/css/colorpicker.css"/>
    <link rel="stylesheet" type="text/css" href="js/bootstrap-daterangepicker/daterangepicker-bs3.css"/>
    <link rel="stylesheet" type="text/css" href="js/bootstrap-datetimepicker/css/datetimepicker-custom.css"/>

    <!--multi-select-->
    <link rel="stylesheet" type="text/css" href="js/jquery-multi-select/css/multi-select.css"/>

    <!--dynamic table-->
    <link href="js/advanced-datatable/css/demo_page.css" rel="stylesheet" />
    <link href="js/advanced-datatable/css/demo_table.css" rel="stylesheet" />
    <link rel="stylesheet" href="js/data-tables/DT_bootstrap.css" />

    <!--file upload-->
    <link rel="stylesheet" type="text/css" href="css/bootstrap-fileupload.min.css"/>

    <!--tags input-->
    <link rel="stylesheet" type="text/css" href="js/jquery-tags-input/jquery.tagsinput.css"/>


    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/style-responsive.css}">

    <style type="text/css">
      .form-control::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      .form-control::-webkit-scrollbar-thumb {
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        background-color: #c3c3c3;
      }
      .form-control::-webkit-scrollbar-track {
        background-color: transparent;
      }
    </style>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script th:src="@{js/html5shiv.js}"></script>
    <script th:src="@{js/respond.min.js}"></script>
    <![endif]-->
  </head>
  <body>

    <!-- left side start-->
    <div class="left-side sticky-left-side" th:fragment="leftmenu(index,active)">

      <!--logo and iconic logo start-->
      <div class="logo">
        <a th:href="@{/main.html}">
          <img alt="" src="images/logo.png"></a>
      </div>

      <div class="logo-icon text-center">
        <a th:href="@{/main.html}">
          <img alt="" src="images/logo_icon.png"></a>
      </div>
      <!--logo and iconic logo end-->

      <div class="left-side-inner">
        <!--侧边栏导航开始-->
        <ul class="nav nav-pills nav-stacked custom-nav">
          <li th:class="${index == 1? 'menu-list nav-active': 'menu-list'}">
            <a th:href="@{/main.html}">
              <i class="fa fa-home"></i>
              <span>指示板</span>
            </a>
            <ul class="sub-menu-list">
              <li th:class="${active == 'main.html'? 'active': ''}">
                <a th:href="@{/main.html}">监控页面</a>
              </li>
            </ul>
          </li>

          <li th:class="${index == 2? 'menu-list nav-active': 'menu-list'}">
            <!--<li class="menu-list">-->
            <a href="">
              <i class="fa fa-user"></i>
              <span>用户管理</span>
            </a>
            <ul class="sub-menu-list">
              <li th:class="${active == 'userList'? 'active': ''}">
                <a th:href="@{/userList}"> 系统用户列表</a>
              </li>
            </ul>
          </li>
          <li th:class="${index == 3 ? 'menu-list nav-active': 'menu-list'}">
            <a href="#">
              <i class="fa fa-users"></i>
              <span>员工管理</span>
            </a>
            <ul class="sub-menu-list">
              <li th:class="${active == 'staffList'? 'active': ''}">
                <!--<li>-->
                <a th:href="@{/staffList}"> 员工列表</a>
              </li>
            </ul>
          </li>
          <li th:class="${index == 4 ? 'menu-list nav-active': 'menu-list'}">
            <a href="#">
              <i class="fa fa-sitemap"></i>
              <span>部门管理</span>
            </a>
            <ul class="sub-menu-list">
              <li th:class="${active == 'departmentList'? 'active': ''}">
                <!--<li>-->
                <a th:href="@{/departmentList}"> 部门列表</a>
              </li>
            </ul>
          </li>

        </ul>
        <!--侧边栏导航结束-->
      </div>
    </div>
    <!-- 左侧结束-->

    <!-- 头部分开始-->
    <div class="header-section" th:fragment="headermenu">

      <!--开关按钮开始-->
      <a class="toggle-btn">
        <i class="fa fa-bars"></i>
      </a>
      <!--开关按钮结束-->

      <!--搜索开始-->
      <form th:action="@{/search}"
            class="searchform"
            method="post">
        <input class="form-control" name="keyword" placeholder="输入搜索内容..." type="text"/>
      </form>
      <!--搜索结束-->

      <!--通知菜单开始 -->
      <div class="menu-right">
        <ul class="notification-menu">
          <li>
            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
              <img alt="" src="images/photos/user-avatar.png"/>
              [[${session.loginUser.username}]]
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
              <li>
                <a th:href="@{/}"><i class="fa fa-sign-out"></i>登出</a>
              </li>
            </ul>
          </li>

        </ul>
      </div>
      <!--通知菜单结束 -->
    </div>
    <!-- 头部分结束-->

    <!--footer  start-->
    <footer th:fragment="footer">2021 &copy; AdminEx by ThemeBucket && Charonl</footer>
    <!--footer  end-->

    <div id="commonscript">
      <!-- Placed js at the end of the document so the pages load faster -->
      <script th:src="@{/js/jquery-1.10.2.min.js}"></script>
      <script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
      <script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
      <script th:src="@{/js/bootstrap.min.js}"></script>
      <script th:src="@{/js/modernizr.min.js}"></script>
      <script th:src="@{/js/jquery.nicescroll.js}"></script>

      <script src="js/jquery.isotope.js"></script>

      <!--pickers plugins-->
      <script type="text/javascript" src="js/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
      <script type="text/javascript" src="js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
      <script type="text/javascript" src="js/bootstrap-daterangepicker/moment.min.js"></script>
      <script type="text/javascript" src="js/bootstrap-daterangepicker/daterangepicker.js"></script>
      <script type="text/javascript" src="js/bootstrap-colorpicker/js/bootstrap-colorpicker.js"></script>
      <script type="text/javascript" src="js/bootstrap-timepicker/js/bootstrap-timepicker.js"></script>

      <!--pickers initialization-->
      <script src="js/pickers-init.js"></script>

      <script type="text/javascript" src="js/jquery.validate.min.js"></script>
      <script src="js/validation-init.js"></script>

      <!--ios7-->
      <script src="js/ios-switch/switchery.js"></script>
      <script src="js/ios-switch/ios-init.js"></script>

      <!--icheck -->
      <script src="js/iCheck/jquery.icheck.js"></script>
      <script src="js/icheck-init.js"></script>
      <!--multi-select-->
      <script type="text/javascript" src="js/jquery-multi-select/js/jquery.multi-select.js"></script>
      <script type="text/javascript" src="js/jquery-multi-select/js/jquery.quicksearch.js"></script>
      <script src="js/multi-select-init.js"></script>
      <!--spinner-->
      <script type="text/javascript" src="js/fuelux/js/spinner.min.js"></script>
      <script src="js/spinner-init.js"></script>
      <!--file upload-->
      <script type="text/javascript" src="js/bootstrap-fileupload.min.js"></script>
      <!--tags input-->
      <script src="js/jquery-tags-input/jquery.tagsinput.js"></script>
      <script src="js/tagsinput-init.js"></script>
      <!--bootstrap input mask-->
      <script type="text/javascript" src="js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>

      <!--dynamic table-->
      <script type="text/javascript" language="javascript" src="js/advanced-datatable/js/jquery.dataTables.js"></script>
      <script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>
      <!--dynamic table initialization -->
      <script src="js/dynamic_table_init.js"></script>
      <!--common scripts for all pages-->
      <script src="js/scripts.js"></script>
    </div>

  </body>

</html>